<!-- 业务技术点总结：
1.渲染功能：:v-if/v-elsev-for:class
2.删除功能：点击传参filter过滤覆盖原数组
3.修改个数：点击传参find找对象
4.全选反选：计算属性computed完整写法get/set
5.统计选中的总价和总数量：计算属性computedreduce条件求和
6.持久化到本地：watch监视，localStorage，JsON.stringify，JsON.parse -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/inputnumber.css" />
<link rel="stylesheet" href="./css/index.css" />
<title>购物车</title>



<div class="app-container" id="app">
  <!-- 顶部banner -->
  <div class="banner-box"><img src="./img/fruit.jpg" alt="" /></div>
  <!-- 面包屑 -->
  <div class="breadcrumb">
    <span>🏠</span>
    /
    <span>购物车</span>
  </div>
  <!-- 购物车主体 -->
  <div class="main">
    <div class="table">
      <!-- 头部 -->
      <div class="thead">
        <div class="tr">
          <div class="th">选中</div>
          <div class="th th-pic">图片</div>
          <div class="th">单价</div>
          <div class="th num-th">个数</div>
          <div class="th">小计</div>
          <div class="th">操作</div>
        </div>
      </div>
      <!-- 身体 -->
      <div class="tbody" v-if="fruitList.length>0">
        <div class="tr" :class="{active:item.isChecked}" v-for="(item,index) in fruitList" ::key="item.id">
          <div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
          <div class="td"><img :src="item.icon" alt="" /></div>
          <div class="td">{{item.price}}</div>
          <div class="td">
            <div class="my-input-number">
              <button class="decrease" :disabled="item.num <=1 " @click="item.num--"> - </button>
              <span class="my-input__inner">{{item.num}}</span>
              <button class="increase" @click="item.num++"> + </button>
            </div>
          </div>
          <div class="td">{{item.num*item.price}}</div>
          <div class="td"><button @click="del(item.id)">删除</button></div>
        </div>
        <!-- 底部 -->
        <div class="bottom">
          <!-- 全选 -->
          <label class="check-all">
            <input type="checkbox" v-model="isAll" />
            全选
          </label>
          <div class="right-box">
            <!-- 所有商品总价 -->
            <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{totalPrice}}</span></span>
            <!-- 结算按钮 -->
            <button class="pay">结算( {{totalCount}} )</button>
          </div>
        </div>
      </div>
      <!-- 空车 -->
      <div class="empty" v-else>🛒空空如也</div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
  const defaultArr = [
    {
      id: 1,
      icon: './img/火龙果.png',
      isChecked: true,
      num: 2,
      price: 6,
    },
    {
      id: 2,
      icon: './img/荔枝.png',
      isChecked: false,
      num: 7,
      price: 20,
    },
    {
      id: 3,
      icon: './img/榴莲.png',
      isChecked: false,
      num: 3,
      price: 40,
    },
    {
      id: 4,
      icon: './img/鸭梨.png',
      isChecked: true,
      num: 10,
      price: 3,
    },
    {
      id: 5,
      icon: './img/樱桃.png',
      isChecked: false,
      num: 20,
      price: 34,
    },
  ]
  const app = new Vue({
    el: '#app',
    data: {
      // 水果列表
      fruitList: JSON.parse(localStorage.getItem('list')).length > 0 ? JSON.parse(localStorage.getItem('list')) : defaultArr,
    },
    computed: {
      /* 简单写法  
       isAll() {
          //必须所有的小选框都选中，全选按钮才选中→every
          return this.fruitList.every(item => item.isChecked)
        } */
      //完整写法 = get+set
      isAll: {
        get() {
          return this.fruitList.every(item => item.isChecked)
        },
        set(value) {
          //基于拿到的布尔值,要让所有的小选框 同步状态
          this.fruitList.forEach(item => item.isChecked = value)
        }
      },
      //统计选中的总数  reduce
      totalCount() {
        return this.fruitList.reduce((sum, item) => {
          if (item.isChecked) {
            // 选中了，需要累加
            return sum + item.num
          } else {
            // 没选中,不需要累加
            return sum
          }
        }, 0)
      },
      //统计选中的总价
      totalPrice() {
        return this.fruitList.reduce((sum, item) => {
          if (item.isChecked) {
            // 选中了，需要累加
            return sum + item.price * item.num
          } else {
            // 没选中,不需要累加
            return sum
          }
        }, 0)
      }
    },
    methods: {
      del(id) {
        this.fruitList = this.fruitList.filter(item => item.id !== id)
      }
    },
    watch: {
      fruitList: {
        deep: true,
        handler(newValue) {
          //需要将变化后的newValue 存入本地(转JSON)
          localStorage.setItem('list', JSON.stringify(newValue))
        }
      }
    }
  })
</script>